<template>
	<div class="m-tabct">
		<div class="m-hmhot">
			<div class="hotop">
				<div class="hotopct">
					<div class="u-hmsprt hoticon"></div>
					<div class="hottime">
						<!-- react-text: 4399 -->更新日期：
						<!-- /react-text -->
						<!-- react-text: 4400 -->11月01日
						<!-- /react-text -->
					</div>
				</div>
			</div>
			<hot-rankings :rankingsList="rankingsList"></hot-rankings>
			<div class="hotdn"><span class="hotview">查看完整榜单</span></div>
		</div>
	</div>
</template>

<script>
	import hotRankings from '@/components/twoHotsong/Rankings.vue'
	import axios from 'axios'
	import api from '@/api'
	export default {
		components:{
			hotRankings
		},
		data () {
			return {
				rankingsList:''
			}
		},
		mounted(){
		    axios.get(api.rankingsList,{
				params:{
					"token":""
					}
				})
				.then((res)=>{
					console.log(res)
					this.rankingsList=res.data.playlist
					console.log(this.rankingsList)
					})
				.catch((err)=>{
	//			console.log(err)
			})
			},
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	
	.m-tabct {
		width: 100%;
		height: 100%;
		margin-top: r(208px);
		.hotop {
			position: relative;
			padding-top: 38.9%;
			overflow: hidden;
			background: url(https://s3.music.126.net/m/s/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee) no-repeat;
			background-size: contain;
			.hotopct {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				flex-direction: column;
				justify-content: center;
				z-index: 2;
				padding-left: r(40px);
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				.hoticon {
					width: r(284px);
					height: r(134px);
				}
				.u-hmsprt {
					background: url(//s3.music.126.net/m/s/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880) no-repeat;
					background-size: r(332px) r(194px);
					background-position: r(-48px) r(-60px);
				}
				.hottime {
					margin-top: r(20px);
					color: hsla(0, 0%, 100%, .8);
					font-size: r(24px);
					-webkit-transform: scale(.91);
					transform: scale(.91);
					-webkit-transform-origin: left top;
					transform-origin: left top;
				}
			}
		}
		.hotdn {
			height: r(110px);
			line-height: r(110px);
			text-align: center;
			.hotview {
				display: inline-block;
				font-size: r(28px);
				color: #999;
				padding-right: r(28px);
				background: url() 100% no-repeat;
				background-size: r(14px) r(24px);
			}
		}
	}
</style>